<template>
  <el-dialog  
    :title="title"
    class="paas-send-target__dialog" 
    :visible.sync="visible"
    :close-on-click-modal="false" 
    append-to-body
    width="700px"> 
    <publink-paas-config-contact
      v-if="visible"
      :is-need-tag-slot="false"
      ref="configContact"
      :value="paasContactChooseUsers"
      :flow-api="flowApi"
      :fields="fields"
      :show-tab-setting="showPaasContactTabSetting"
      :is-dynamic-flow-design-choose="isDynamicFlowDesignChoose"
      :show-dynamic-menus="showDynamicMenus"
      :showNewNodeFlowLeader="showNewNodeFlowLeader"
      show-dynamic>
    </publink-paas-config-contact>
    <span slot="footer" class="dialog-footer">
      <el-button @click="visible = false">{{$t('common.base.cancel')}}</el-button>
      <el-button type="primary" @click="handleChooseUserSubmit">{{$t('common.base.confirm')}}</el-button>
    </span>
  </el-dialog>
</template>
<script>
/** api */
import * as FlowApi from '@src/api/FlowApi.ts';
const SHOW_TAB_SETTING = { show: true, isMulti: true };

export default {
  name: 'paas-config-contact',
  components: {},
  data() {
    return {
      visible: false,
      showPaasContactTabSetting: {
        department: { ...SHOW_TAB_SETTING },
        member: { ...SHOW_TAB_SETTING },
        role: { ...SHOW_TAB_SETTING},
        dynamic: { ...SHOW_TAB_SETTING }
      },
    };
  },
  props: {
    title: {
      type: String,
      default: ''
    },
    paasContactChooseUsers:{
      type: Array,
      default: () => []
    },
    fields:{
      type: Array,
      default: () => []
    },
    /** 判断是动态获取的话设置支持节点负责人获取节点的列表 */
    isDynamicFlowDesignChoose: {
      type: Boolean,
      default: false
    },
    showDynamicMenus:{
      type: Array,
      default: () => []
    },
    showNewNodeFlowLeader:{
      type: Array,
      default: () => []
    }
  },
  computed: {
    flowApi() {
      return { ...FlowApi };
    },
  },
  mounted() {},
  methods: {
    /** 保存设置 */
    handleChooseUserSubmit() {
      // 获取对应的选中paas人员控件的值
      const checkedArr = this.$refs?.configContact?.$children[0]?.checked ?? []
      const replaceCheckedArr = checkedArr.map(user=> {
        const { id, name, type, extend } = user;
        const result = { id, name, type };
        if (extend) result.extend = extend;
        return result;
      })
      this.$emit('handleChooseUserSubmit', replaceCheckedArr)
      this.visible = false;
    }
  }
};
</script>
<style lang="scss" scoped>
</style>